<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:b="http://bootsfaces.net/ui">

    <ui:composition template="/resources/template/squelette/squelette.xhtml">

        <ui:define name="titre">
            <h:outputText value="Administration des utilisateurs" />
        </ui:define>

        <ui:define name="content">
            <b:panel>
                <f:facet name="heading">
                    <h:form>
                        <b:button value="Ajouter" look="primary" size="sm" outcome="pretty:nav_administration_utilisateurs_ajout"/>
                    </h:form>
                </f:facet>

                <table id="dt_utilisateurs" class="display compact" width="100%">
                    <thead>
                        <tr>
                            <td>USERNAME</td>
                            <td>NOM</td>
                            <td>PRENOM</td>
                            <td>MAIL</td>
                            <td>PAYS</td>
                        </tr>
                    </thead>

                    <tbody>
                        <ui:repeat var="utilisateur" value="#{administrationUtilisateursListerController.listeUtilisateur}">
                            <tr>
                                <td>
                                    <h:link value="#{utilisateur.username}" outcome="pretty:nav_administration_utilisateurs_details">
                                        <f:param name="id" value="#{utilisateur.id}" />
                                    </h:link>
                                </td>
                                <td><h:outputText value="#{utilisateur.nom}" /></td>
                                <td><h:outputText value="#{utilisateur.prenom}" /></td>
                                <td><h:outputText value="#{utilisateur.mail}" /></td>
                                <td><h:outputText value="#{utilisateur.pays.libelle}" /></td>
                            </tr>
                        </ui:repeat>
                    </tbody>
                </table>
            </b:panel>
        </ui:define>

        <ui:define name="js">
            <script>
                $(document).ready(function() {
                    createDatatable('#dt_utilisateurs')
                })
            </script>
        </ui:define>

    </ui:composition>
</html>